<template>
  <div style="min-width:1320px">
    <el-row style="padding:20px">
      <el-col :span="8">
        <span style="color:red">*</span>
        <span>报表分类</span>
        <el-select v-model="value"
                   clearable
                   placeholder="请选择报表分类"
                   class="report_select"
                   style="width:270px">
          <el-option v-for="item in reportList"
                     :key="item.value"
                     :label="item.name"
                     :value="item.content1">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <span>申报单位</span>
        <el-input v-model="unit"
                  placeholder="请输入申报单位"
                  style="width:140px"></el-input>
      </el-col>
      <el-col :span="4">
        <span>年</span>
        <el-select v-model="year"
                   clearable
                   placeholder="请选择年"
                   class="report_select"
                   style="width:150px">
          <el-option v-for="item in yearList"
                     :key="item.value"
                     :label="item.label"
                     :value="item.year">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5">
        <span>季度</span>
        <el-select v-model="quarter"
                   clearable
                   placeholder="请选择季度"
                   class="report_select"
                   style="width:150px">
          <el-option v-for="item in quarterList"
                     :key="item.value"
                     :label="item.name"
                     :value="item.quarter">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button type="primary"
                   style="width:80px"
                   @click="search()">搜索</el-button>
      </el-col>
    </el-row>
    <el-row style="padding:0px 20px">
      <el-table show-header
                :border="true"
                :header-cell-style="{background:'#f5f5f5'}"
                :data="tableData"
                style="width: 100%">
        <el-table-column prop="year"
                         align="center"
                         show-overflow-tooltip
                         label="年">
        </el-table-column>
        <el-table-column label="季度"
                         align="center"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.row.quarter=='1'?'第一季度' :scope.row.quarter=='2'?'第二季度':scope.row.quarter=='3'?'第三季度' :'第四季度'}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="sortname"
                         label="报表分类"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="company_name"
                         label="申报单位"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作"
                         align="center"
                         show-overflow-tooltip>
          <template slot-scope="scope">
            <!-- 查 -->
            <el-button size="medium"
                       type="primary"
                       v-if="Status"
                       @click="linkDeteil(scope.row)"
                       icon="el-icon-view"></el-button>
            <!-- 改 -->
            <el-button size="medium"
                       type="success"
                       v-if="Status==false"
                       @click="linkEdit(scope.row)"
                       icon="el-icon-edit"></el-button>
            <!-- 删 -->
            <el-button v-if="Status==false"
                       size="medium"
                       type="danger"
                       @click="linkDelete(scope.row.id)"
                       icon="el-icon-delete"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="padding:20px 20px 0px 20px;text-align:right"
            v-if="Status==false">
      <!-- 增 -->
      <el-button style="width:70px"
                 size="medium"
                 type="warning"
                 @click="linkAdd()"
                 icon="el-icon-plus">
      </el-button>
    </el-row>
    <el-row>
      <el-col :span="24"
              style="padding:20px 0;text-align:center">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[10]"
                       :page-size="pagesize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog title=""
               @close="closeDialog()"
               class="table_dialog"
               :fullscreen="true"
               :visible.sync="dialogTableVisible"
               style="padding:0">
      <iframe :src="url"
              style="width:100%;height:600px;border:none"></iframe>
    </el-dialog>
  </div>
</template>
<script>
import { standardCodeApi } from '@/services/StandardCode'
import { ReportFormApi } from '@/services/WorkCenter'
export default {
  props: {
    Status: Boolean
  },
  data () {
    return {
      value: '', // 报表分类字段
      unit: '', // 报表单位字段
      quarter: '', // 季度字段
      year: '', // 年份字段
      dialogTableVisible: false,
      reportList: [],
      yearList: [],
      quarterList: [
        {
          quarter: '1',
          name: '第一季度'
        },
        {
          quarter: '2',
          name: '第二季度'
        },
        {
          quarter: '3',
          name: '第三季度'
        },
        {
          quarter: '4',
          name: '第四季度'
        }
      ],
      tableData: [],
      currentPage: 1,
      total: 0,
      pagesize: 10,
      companyId: '', // 单位id
      url: ''
    }
  },
  methods: {
    handleSizeChange () {
    },
    // 分页
    handleCurrentChange (val) {
      this.currentPage = val
      this.getData()
    },
    // 跳转至详情页面
    linkDeteil (data) {
      this.url = 'http://bpm.hibuilding.cn/form/formDef/formDefPreview.html' + '?key=' + data.sort + '&user=' + window.localStorage.getItem('user_id') + '&orgId=' + data.orgid + '&id=' + data.id + '&action=read'
      this.dialogTableVisible = true
    },
    // 跳转至修改页面
    linkEdit (data) {
      this.url = 'http://bpm.hibuilding.cn/form/formDef/formDefPreview.html' + '?key=' + data.sort + '&user=' + window.localStorage.getItem('user_id') + '&orgId=' + data.orgid + '&id=' + data.id
      this.dialogTableVisible = true
    },
    // 删除操作
    linkDelete (id) {
      ReportFormApi.delReportForm({
        data: {
          id: id
        }
      }).then((res) => {
        if (res.code == 1) {
          this.getData()
          this.$message({
            message: '删除成功!',
            type: 'success'
          })
        } else {
          this.$message.error('删除失败!')
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    // 添加数据操作
    linkAdd () {
      if (this.value == '') {
        this.$message({
          message: '请先选择报表分类！',
          type: 'warning'
        })
      } else {
        this.url = 'http://bpm.hibuilding.cn/form/formDef/formDefPreview.html' + '?key=' + this.value + '&user=' + window.localStorage.getItem('user_id') + '&orgId=' + window.localStorage.getItem('comp_id')
        this.dialogTableVisible = true
      }
    },
    // 关闭弹窗
    closeDialog () {
      this.getData()
    },
    // 搜索功能
    search () {
      if (this.value == '') {
        this.$message({
          message: '请先选择报表分类！',
          type: 'warning'
        })
      } else {
        this.getData()
      }
      //
    },
    // 页面打开时的数据渲染
    getData () {
      ReportFormApi.getReportFormList({
        params: {
          page: this.currentPage,
          sort: this.value,
          company_id: this.unit,
          year: this.year,
          quarter: this.quarter
        }
      }).then((res) => {
        this.total = res.data.total
        this.tableData = res.data.data
      }).catch((error) => {
        console.log(error)
      })
    },
    // 判断入口是查看状态还是编辑状态
    getShow () {
      if (this.isjump == '1') {
        this.showedit = false
        this.showdelete = false
        this.showadd = false
        this.showdetail = true
      } else {
        this.showedit = true
        this.showdelete = true
        this.showadd = true
        this.showdetail = false
      }
    },
    // 获取报表分类
    getClass () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'reportSort'
        }
      }).then((res) => {
        this.reportList = res.data.list
        this.value = this.reportList[0].content1
        this.getData()
      }).catch((error) => {
        console.log(error)
      })
    },
    //获取年份
    getYear () {
      //yearList
      var currentYear = new Date();//构造函数
      var year = currentYear.getFullYear();//获取当前年份
      var count = 1970;
      var yearLenth = year - count;
      for (var i = 0; i < yearLenth + 1; i++) {
        this.yearList.push({ year: count });
        count = count + 1;
      };
      this.yearList.reverse();
    }
  },
  created () {
    //获取年份
    this.getYear();
    this.getShow()
    console.log(this.Status)
  },
  mounted () {
    this.getClass()
  }
}
</script>
<style scoped>
.table_dialog /deep/ .el-dialog__header {
  padding: 0px !important;
}

.table_dialog /deep/ .el-dialog__body {
  padding: 0px !important;
}

.table_dialog /deep/ .el-dialog__headerbtn {
  font-size: 30px;
}

.table_dialog /deep/ .el-dialog__close {
  color: #000;
}
</style>
